<template>
  <el-button
    type="primary"
    size="default"
    icon="ele-Plus"
    @click="emit('setState', 1)"
    :disabled="!category3Id"
    >添加SPU</el-button
  >

  <el-table :data="spuPageList" border stripe :style="{ margin: '30px 0 ' }">
    <el-table-column type="index" width="80" label="序号" />
    <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
    <el-table-column label="SPU描述" prop="description"> </el-table-column>
    <el-table-column label="操作">
      <template v-slot="{ row , $index}">
        <el-button
          type="primary"
          size="small"
          :ac="$index"
          @click="addSku(row)"
          title="添加SKU"
          icon="ele-Plus"
        ></el-button>
        <el-button
          type="primary"
          size="small"
          @click="emit('setState', 1, row)"
          title="编辑SPU"
          icon="ele-Edit"
        ></el-button>
        <el-button
          type="info"
          size="small"
          @click="showDetail(row)"
          title="查看SKU"
          icon="ele-Warning"
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="deleteSpu(row)"
          title="删除SPU"
          icon="ele-Delete"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:page-size="limit"
    v-model:current-page="page"
    :page-sizes="[3, 5, 7, 9]"
    :pager-count="5"
    layout="prev, pager, next, sizes"
    :total="total"
  />
  <el-dialog v-model="dialogTableVisible" title="Sku列表">
    <el-table :data="skuList">
      <el-table-column property="date" label="名称" prop="skuName"/>
      <el-table-column property="name" label="价格" prop="price" />
      <el-table-column property="address" label="重量" prop="weight"/>
      <el-table-column property="address" label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" width="120" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "SpuList",
  });
  </script>
  
  <script setup lang="ts">
    import {ref,watch} from "vue";
    import { storeToRefs } from "pinia";
    import { ElMessage } from "element-plus";
    import useAttrStore from "@/stores/attr";
    import type { SpuInfoType } from "@/api/spu";
    import { requestSpuList ,requestDeleteSpu} from "@/api/spu";
    import type {SkuInfoListType} from "@/api/sku";
    import{requestFindBySpuId} from "@/api/sku";

//接收自定义事件
// void这个是函数没有返回值的时候，返回值的类型
const emit = defineEmits<{
  (event:"setState",state:number,row?:SpuInfoType):void;
}>();

    //初始化页码的数据
    const limit =ref(3);
    const page = ref (1);
    const total =ref (0);

//拿到pinia中的三级分类数据
const attrStore = useAttrStore();
//这个是解构出来，后面可以直接使用就可以了
const {category3Id}= storeToRefs(attrStore);

//声明数据保存spu分页列表
const spuPageList = ref<SpuInfoType[]>([]);
//发送spu分页列表请求
const getSpuPageList = async () =>{
  try{
    //发送请求拿到数据
    const result = await requestSpuList(
      page.value,
      limit.value,
      category3Id.value as number
    );
    //把分页数据中的总数和分类列表交给我们的响应式数据
    spuPageList.value = result.records;
    total.value = result.total;
  }catch(e) {
  ElMessage.error("请求分页列表失败");
  }
}


// 1.当三级分类被选择的时候，展示当前三级分类下的所有spu
watch (
  category3Id,
  ()=>{
    if(category3Id.value === null) {
      //如果三级分类变为null,则清空分页列表
      spuPageList.value = [];
      total.value = 0;
      return;
    }
    //一旦cayegory3Id发生变化,就立即发送请求 请求新的分页列表
    getSpuPageList();
  },
  {immediate:true}
);

//2.监视limit和page的改变,然后发送请求
watch([page, limit], () => {
  //检测如果重新选择的话,total.value会发生变化,导致page可能发生变化,因为没有categoryId导致请求失败
  if (category3Id.value === null) {
    return;
  }
  //发送请求
  getSpuPageList();
});

//删除某个Spu
const deleteSpu = async (row: SpuInfoType) => {
  try {
    await requestDeleteSpu(row.id as number);
    //发送请求
    getSpuPageList();
  } catch (e) {
    ElMessage.error("删除数据失败");
  }
};

//点击去往新增sku
const addSku = (row: SpuInfoType) => {
  emit("setState", 2, row);
};

const dialogTableVisible = ref (false);
const skuList = ref<SkuInfoListType>([]);
//查看sku列表
const showDetail = async(row:SpuInfoType)=> {
  dialogTableVisible.value = true;

  try {
    const result = await requestFindBySpuId(row.id as number);
    skuList.value =result;
  } catch (e) {
    ElMessage.error("查看Sku列表失败");
  }
};


  </script>
  